<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E-shoping首页</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 头部内容开始 -->
    <header>
        <div class="headtop"></div>
        <div class="nav">
            <div class="nav-content">
                <div class="logo">LOGO</div>
                <ul>
                    <li>首页</li>
                    <li>首页</li>
                    <li>首页</li>
                    <li>首页</li>
                    <li>首页</li>
                    <li>首页</li>
                </ul>
                <div class="top-fun">
                   <div class="login">
                       <i><img src="img/login.png" alt=""></i>
                       <span><a href="javascript:;">登&nbsp;陆</a></span>
                   </div>
                   <div class="register">
                    <i><img src="img/register.png" alt=""></i>
                    <span><a href="javascript:;">注&nbsp;册</a></span>
                   </div>
                   <div>
                       <a href="javascript:;"><i><img src="img/shop.png" alt=""></i></a>
                   </div>
                </div>
            </div>
        </div>
    </header>
    <!-- 头部内容结束 -->
    <!-- banner栏 -->
    <div class="banner">
        <div class="ol-box">
            <ol class="md">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>
    <!-- 这是主要内容开始 -->
    <main>
        <div class="main-content">
            <!-- 商品展示区 -->
            <div class="Comm-display">
                <h3>Commodity display</h3>
                <p>
                    <i></i>
                    <span>商品展示</span>
                    <i></i>
                </p>
                <div class="display-content">
                 <ul class="dis-top">
                     <li></li>
                     <li></li>
                     <li></li>
                 </ul>
                 <ul class="dis-bottom">
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                </div>
            </div>
            <!-- 热卖专区 -->
            <div class="Hot-sell">
                <h3>Hot selling area</h3>
                <p class="title">
                    <i></i>
                    <span>热卖专区</span>
                    <i></i>
                </p>
                <ul class="hotsel-content">
                    <li>
                        <dt><a href=""><img src="" alt=""></a></dt>
                        <dd>
                            <p>商品名称</p>
                            <p>价格</p>
                        </dd>
                    </li>
                    <li>
                        <dt><a href=""><img src="" alt=""></a></dt>
                        <dd>
                            <p>商品名称</p>
                            <p>价格</p>
                        </dd>
                    </li>
                    <li>
                        <dt><a href=""><img src="" alt=""></a></dt>
                        <dd>
                            <p>商品名称</p>
                            <p>价格</p>
                        </dd>
                    </li>
                </ul>
            </div>
            <!-- 抢购专区 -->
            <div class="purchase">
                <div class="pur-show1">

                </div>
                <div class="pur-show2">

                </div>
            </div>
            <!-- 配件专区 -->
            <div class="Acc-zone">
                <h3>Accessories Zone</h3>
                <p class="title">
                    <i></i>
                    <span>热卖专区</span>
                    <i></i>
                </p>
                <ul class="Acc-show">
                    <li>
                        <dt><a href=""><img src="" alt=""></a></dt>
                        <dd>
                            <p>商品名称</p>
                            <p>价格</p>
                        </dd>
                    </li>
                    <li>
                        <dt><a href=""><img src="" alt=""></a></dt>
                        <dd>
                            <p>商品名称</p>
                            <p>价格</p>
                        </dd>
                    </li>
                    <li>
                        <dt><a href=""><img src="" alt=""></a></dt>
                        <dd>
                            <p>商品名称</p>
                            <p>价格</p>
                        </dd>
                    </li>
                    <li>
                        <dt><a href=""><img src="" alt=""></a></dt>
                        <dd>
                            <p>商品名称</p>
                            <p>价格</p>
                        </dd>
                    </li>
                    <li>
                        <dt><a href=""><img src="" alt=""></a></dt>
                        <dd>
                            <p>商品名称</p>
                            <p>价格</p>
                        </dd>
                    </li>
                    <li>
                        <dt><a href=""><img src="" alt=""></a></dt>
                        <dd>
                            <p>商品名称</p>
                            <p>价格</p>
                        </dd>
                    </li>
                    <li>
                        <dt><a href=""><img src="" alt=""></a></dt>
                        <dd>
                            <p>商品名称</p>
                            <p>价格</p>
                        </dd>
                    </li>
                    <li>
                        <dt><a href=""><img src="" alt=""></a></dt>
                        <dd>
                            <p>商品名称</p>
                            <p>价格</p>
                        </dd>
                    </li>
                </ul>
            </div>
        </div>
    </main>
    <!-- 主要内容区结束 -->
    <footer>
        底部信息栏
    </footer>
</body>
</html>
